import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: BasicCustomScrollView(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    //脚手架
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            //背景
            backgroundColor: Colors.blue,
            //展开的高度
            expandedHeight: 240,
            //固定在顶部
            pinned: true,
            //背景
            flexibleSpace: LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
                //FlexibleSpaceBar 状态 参数
                final settings = context
                    .dependOnInheritedWidgetOfExactType<
                      FlexibleSpaceBarSettings
                    >();
                //
                final min = settings!.minExtent;
                final max = settings!.maxExtent;
                //滑动范围
                final delta = max - min;
                //当前的滑动
                final current = settings.currentExtent;

                double opacity = (1.0 - (current - min) / delta).clamp(0, 1.0);

                return FlexibleSpaceBar(
                  title: Opacity(
                    opacity: opacity,
                    child: Text(
                      '产品详情',
                      style: TextStyle(
                        color: Colors.white,
                        shadows: [
                          Shadow(
                            color: Colors.black54,
                            blurRadius: 4,
                            offset: Offset(2, 2),
                          ),
                        ],
                      ),
                    ),
                  ),
                  background: Image.asset(
                    'asset/images/s04.png',
                    fit: BoxFit.cover,
                  ),
                );
              },
            ),
          ),
          //
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                '产品列表 ',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
            ),
          ),

          SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver: SliverGrid(
              delegate: SliverChildBuilderDelegate((context, index) {
                return Card(
                  elevation: 4,
                  child: Column(
                    children: [
                      Expanded(
                        child: Container(color: Colors.blue[100 * (index % 9)]),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('产品标题 $index'),
                      ),
                    ],
                  ),
                );
              }, childCount: 10),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                childAspectRatio: 0.8,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class BasicCustomScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          // 可折叠的 AppBar
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('自定义滚动视图'),
              background: Image.network(
                'https://picsum.photos/400/200',
                fit: BoxFit.cover,
              ),
            ),
          ),

          // 标题部分
          SliverToBoxAdapter(
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: Text(
                '产品列表',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
            ),
          ),

          // 网格布局
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 10.0,
              mainAxisSpacing: 10.0,
              childAspectRatio: 0.8,
            ),
            delegate: SliverChildBuilderDelegate((context, index) {
              return Card(
                elevation: 2.0,
                child: Column(
                  children: [
                    Expanded(
                      child: Container(
                        color: Colors.blue[100 * (index % 9)],
                        child: Center(child: Text('产品 $index')),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Text('产品描述 $index'),
                    ),
                  ],
                ),
              );
            }, childCount: 10),
          ),

          // 列表布局
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return ListTile(
                leading: CircleAvatar(child: Text('${index + 1}')),
                title: Text('列表项目 ${index + 1}'),
                subtitle: Text('这是第 ${index + 1} 个项目的描述'),
                trailing: Icon(Icons.arrow_forward_ios),
              );
            }, childCount: 20),
          ),
        ],
      ),
    );
  }
}
